<template>
	<public-view navType="store" navTitle="店铺" navColor="#ffffff" topBgShow="4">
		<view class="content">
			<view class="swiper-box">
				<my-swiper :list="info_item.banner"></my-swiper>
			</view>
			<view class="store-view">
				<view class="store-name f-s-30 f-w-b">
					{{info_item.name||""}}
				</view>
				<view class="pingfen flex a-i-c">
					<uni-rate color="#dcdee0" disabledColor="#F32E2E" :disabled="true" :value="info_item.star" @change="onChange" :allowHalf="true" />
					<view class="color-F32E2E f-s-30 l-h-42 f-w-b">
						{{info_item.star}}
					</view>
				</view>
				<view class="yingye-time flex j-c-b">
					<view class="left">
						<view class="time flex a-i-c">
							<image class="icon" src="@/static/images/time-ffdffb.svg" mode=""></image>
							<view class="color-747474 f-s-24 l-h-34 text-box">
								营业时间：{{openTime||""}}
							</view>
						</view>
						<view class="address flex" @click="$location.openMapLocation(info_item.lat,info_item.lng)">
							<image class="icon" src="@/static/images/location-ffdffb.svg" mode=""></image>
							<view class="color-747474 f-s-24 l-h-34 text-box">
								店铺地址：{{(info_item.province_text+info_item.city_text+info_item.area_text+info_item.detail_address)||""}}
							</view>
						</view>
					</view>
					<view class="call-phone-btn all-center color-EE8300 f-s-26 f-w-b" @click="$callPhone(info_item.principal_phone)">
						<image class="phone-icon" src="@/static/images/phone-ee8300.svg" mode=""></image>
						拨打
					</view>
				</view>
				<view class="goots-info w-100 flex f-w-w j-c-b">
					<block v-for="(item, index) in top_goods_list" :key="index">
						<goods-item :item="item" btnType="2"></goods-item>
					</block>
				</view>
			</view>
		</view>
	</public-view>
	
</template>

<script>
	import mySwiper from "@/components/myComponents/swiper.vue"
	import goodsItem from "../shop/components/goodItem.vue"
	import {getGoodsList} from "@/utils/pagePublic.js"
	export default {
		components:{
			"my-swiper":mySwiper,
			"goods-item":goodsItem
		},
		data() {
			return {
				top_goods_list:[],
				merchant_id:"",
				info_item:{}
			};
		},
		onLoad(o) {
			this.merchant_id = o.id
		},
		onShow() {
			getGoodsList({
				merchant_id:this.merchant_id,
				class_id:"",
				top_class_id:"",
				keyword:""
			},res=>{
				console.log(res)
				this.top_goods_list = res.data.data
			})
			this.getMerchatInfo()
		},
		computed:{
			openTime(){
				const chineseNumbers = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				let arr = [],str=""
				this.info_item.business_time.weeks.map(val=>{
					arr.push(chineseNumbers[val])
				})
				str =`${arr.toString()} ${this.info_item.business_time.start}-${this.info_item.business_time.end}`
				return str
			}
		},
		methods:{
			getMerchatInfo(){
				let that = this
				that.util.postRequest({
					url:"v1/merchant/getPartsMerchant",
					data:{
						id:that.merchant_id
					}
				}).then(res=>{
					console.log(res)
					that.info_item = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.store-view{
		width: 100%;
		padding: 24rpx;
		.yingye-time{
			width: 100%;
			margin-bottom: 20rpx;
			.call-phone-btn{
				width: 120rpx;
				height: 48upx;
				background: rgba(255, 255, 255, 0.4);
				border: 2upx solid #EE8300;
				border-radius: 8upx;
				.phone-icon{
					width: 26rpx;
					height: 26upx;
					margin-right: 10upx;
				}
			}
			.left{
				.text-box{
					width: 518upx;
				}
				.icon{
					width: 28rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}
			}
		}
		.pingfen{
			width: 100%;
			margin-bottom: 16upx;
		}
		.store-name{
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 20upx;
		}
	}
	.swiper-box{
		margin-top: 16upx;
		margin-bottom: 20upx;
	}
	.content{
		width: 750rpx;
		min-height: 100vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-top: 22rpx;
	}
</style>
